<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{report_name}}</title>
    <!-- 引入 layui.css -->
    <link href="https://rp.make2.top/smartvc/static/css/layui.css" rel="stylesheet">
    <script src="https://rp.make2.top/smartvc/static/js/layui.js"></script>
    <script src="https://rp.make2.top/smartvc/static/js/echarts.min.js"></script>
    <script src="https://rp.make2.top/smartvc/static/js/report.js"></script>

    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f2f5;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0px 20px;
        }

        .report-container {
            background-color: #fff;
            margin-bottom: 10px;
            padding: 10px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }


        .error-container {
            background: #fff8f7;
            border: 1px solid #ffccc7;
            padding: 15px;
            margin: 20px;
            border-radius: 4px;
            color: #ff4d4f;
        }


        /* 美化小标题，使用股市相关红色 */
        .container h3 {
            color: #e64340;
            /* 类似股市上涨的红色 */
            font-size: 18px;
            margin-top: 0;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 2px solid #e64340;
            /* 类似股市上涨的红色下划线 */
        }

        .top-info {
            margin: 0 0 0.5rem 0;
            padding: 0.75rem 1rem;
            background-color: #fff;
            border-left: 4px solid #e64340;
            color: #333;
            font-size: 0.95rem;
        }

        .top-info strong {
            margin-left: 0.5rem;
            color: #333;
        }

        /* 修改 Layui 表格翻页按钮底色为红色 */
        .layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #e64340;
            /* Layui 红色主色调 */
        }

        .layui-table-page .layui-laypage a:hover {
            color: #e64340;
        }

        .layui-table-page .layui-laypage a,
        .layui-table-page .layui-laypage span {
            margin: 0 3px;
        }



        .collapse-content {
            display: none;
        }

        .collapse-content.active {
            display: block;
        }

        /* 添加h3悬停样式 */
        .collapse-title h3 {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="top-info">
            <strong>{{report_name}}</strong>
        </div>

        <!-- 图表容器 -->
        <div class="report-container">
            <h3>业绩表现</h3>
            <div id="chartContainer" style="width:100%;height:600px"></div>
        </div>
        <div class="report-container">
            <div class="collapse-title" onclick="toggleCollapse(this)">
                <h3>关键指标</h3>

            </div>
            <div class="collapse-content">
                <table id="metricsTable" lay-filter="metricsTable"></table>
            </div>
        </div>

        <!-- 修改交易记录部分 -->
        <div class="report-container">
            <div class="collapse-title" onclick="toggleCollapse(this)">
                <h3>交易记录</h3>

            </div>
            <div class="collapse-content">
                <table id="transactionTable" lay-filter="transactionTable"></table>
            </div>
        </div>

        <!-- 修改最大盈利交易部分 -->
        <div class="report-container">
            <div class="collapse-title" onclick="toggleCollapse(this)">
                <h3>最大盈利的 5 笔交易</h3>

            </div>
            <div class="collapse-content">
                <div id="profitTable"></div>
            </div>
        </div>

        <!-- 修改最大亏损交易部分 -->
        <div class="report-container">
            <div class="collapse-title" onclick="toggleCollapse(this)">
                <h3>最大亏损的 5 笔交易</h3>

            </div>
            <div class="collapse-content">
                <div id="lossTable"></div>
            </div>
        </div>

    </div>


    <!-- 安全数据注入 -->
    <script>
        // 净值数据（带多层保护）
        let assetsData = [];
        try {
            // 直接使用经过 json.dumps 处理的数据，移除 tojson 过滤器
            assetsData = {{ assets_data | safe }};
        
            if (!Array.isArray(assetsData)) {
                console.warn('总资产数据格式异常，自动重置为空数组');
                assetsData = [];
            }
        }
        catch (e) {
            console.error('总资产数据解析失败:', e);
            assetsData = [];
        }

        // 交易数据（带类型校验）
        let transactionData = [];
        try {
            // 直接使用经过 json.dumps 处理的数据，移除 tojson 过滤器
            transactionData = {{ transaction_data | safe }}; //格式化会导致}}分隔错误
        
            if (!Array.isArray(transactionData)) {
                throw new Error('交易数据非数组类型');
            }
        }
        catch (e) {
            document.write(`<div class="error-container">交易数据加载失败：${e.message}</div>`);
            transactionData = [];
        }

        // 初始化分析器
        const analyzer = new AssetAnalyzer(assetsData, transactionData);
        // 最大盈利交易数据（带类型校验）
        let largestProfitTrades = analyzer.get_largest_profit_trades(5);

        // 最大亏损交易数据（带类型校验）
        let largestLossTrades = analyzer.get_largest_loss_trades(5);

    </script>

    <script>
        (function initChart() {
            const container = document.getElementById('chartContainer');

            try {
                if (!assetsData ||
                    !Array.isArray(assetsData) ||
                    assetsData.length === 0) {
                    throw new Error('数据不完整或格式错误');
                }

                const chart = echarts.init(container);

                // 动态获取第一个字段作为日期字段
                const firstKey = Object.keys(assetsData[0])[0];

                // 提取日期字段对应的值
                const dates = assetsData.map(item => item[firstKey]);

                const series = [];
                const legendData = [];


                // 获取关键指标数据并渲染表格
                const metricsData = analyzer.getMetrics();
                renderMetricsTable(metricsData);

                // 获取累计收益率数据
                const ecdatas = analyzer.getEchartsData();
                console.log(ecdatas);//测试用
                // 获取除日期字段外的所有字段
                const keys = Object.keys(ecdatas[0]).filter(key => key !== firstKey);
                // 构建系列数据和坐标系配置
                const returnSeries = [];
                const drawdownSeries = [];

                keys.forEach(key => {
                    const isDrawdown = key.includes('回撤');
                    const isSg = key.includes('策略');
                    const isBech = key.includes('基准');
                    const seriesConfig = {
                        name: key,
                        type: 'line',
                        data: ecdatas.map(item => item[key]),
                        smooth: true,
                        symbol: 'none',
                        // 新增颜色配置
                        color: isSg ? '#c23531' : (isBech ? '#61a0a8' : '#2f4554') // 策略红色，基准浅蓝，默认深蓝
                    };

                    if (isDrawdown) {
                        seriesConfig.xAxisIndex = 1;
                        seriesConfig.yAxisIndex = 1;
                        drawdownSeries.push(seriesConfig);
                    } else {
                        seriesConfig.xAxisIndex = 0;
                        seriesConfig.yAxisIndex = 0;
                        returnSeries.push(seriesConfig);
                    }
                });

                const option = {
                    tooltip: { trigger: 'axis' },
                    legend: [
                        {
                            data: returnSeries.map(s => s.name),

                        },
                        {
                            data: drawdownSeries.map(s => s.name),
                            top: '70%',  // 下方图例位置
                        }
                    ],
                    grid: [
                        {
                            left: '5%',
                            right: '5%',
                            height: '60%',  // 上方图表高度调整为60%
                            top: '5%'
                        },
                        {
                            left: '5%',
                            right: '5%',
                            height: '15%',
                            top: '75%'
                        }
                    ],
                    xAxis: [
                        { type: 'category', data: dates, gridIndex: 0 },
                        { type: 'category', data: dates, gridIndex: 1, show: false, position: 'top' }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            gridIndex: 0,
                            name: '收益率(%)',
                            axisLabel: { formatter: '{value}%' }
                        },
                        {
                            type: 'value',
                            gridIndex: 1,
                            name: '回撤率(%)',

                            axisLabel: { formatter: '{value}%' },
                            splitNumber: 3  // 新增：设置分割段数
                        }
                    ],
                    series: [...returnSeries, ...drawdownSeries],
                    dataZoom: [
                        {
                            type: 'slider', // 使用滑块式数据区域缩放组件
                            start: 0,       // 初始显示范围起始百分比
                            end: 100,       // 初始显示范围结束百分比
                            xAxisIndex: [0, 1], // 控制两个 x 轴
                            filterMode: 'empty' // 缩放时只过滤对应区域的数据
                        }
                    ]
                };


                chart.setOption(option);
                // 监听窗口大小变化事件
                window.addEventListener('resize', function () {
                    if (chart) {
                        chart.resize();
                    }
                });
            } catch (e) {
                container.innerHTML = `
                <div class="error-container" style="user-select: text;">
                    <h3>图表渲染失败</h3>
                    <p>错误原因：${e.message}</p>
                    <p>建议检查数据格式是否符合要求</p>
                </div>`;
                console.error('图表渲染错误:', e);
            }
        })();
        // 表格初始化（带安全隔离）
        layui.use(['table', 'layer'], function () {
            const table = layui.table;
            const container = document.getElementById('transactionTable');

            try {
                // 数据有效性验证
                if (!transactionData ||
                    !Array.isArray(transactionData) ||
                    transactionData.length === 0
                ) {
                    container.innerHTML = '<div class="layui-none">暂无交易数据</div>';
                    return;
                }

                // 动态列检测
                if (!transactionData[0] || typeof transactionData[0] !== 'object') {
                    throw new Error('交易记录数据结构异常');
                }

                const columns = [Object.keys(transactionData[0]).map(key => ({
                    field: key,
                    title: key.toUpperCase(),
                    sort: true
                }))];

                table.render({
                    elem: '#transactionTable',
                    data: transactionData,
                    cols: columns,
                    page: true
                });

                // 统一列配置
                const tradeCols = [
                    [
                        { field: 'symbol', width: 100, title: '标的' },
                        { field: 'profit', width: 100, title: '盈利' },
                        { field: 'open_time', width: 150, title: '开仓时间' },
                        { field: 'open_price', width: 100, title: '开仓价格' },
                        { field: 'open_fee', width: 100, title: '开仓手续费' },
                        { field: 'close_time', width: 150, title: '平仓时间' },
                        { field: 'close_price', width: 100, title: '平仓价格' },
                        { field: 'close_fee', width: 100, title: '平仓手续费' },
                        { field: 'volume', width: 100, title: '平仓数量' },

                    ]
                ];

                // 最大盈利交易表格渲染
                table.render({
                    elem: '#profitTable',
                    data: largestProfitTrades,
                    cols: tradeCols,
                    limit: 5
                });

                // 最大亏损交易表格渲染
                table.render({
                    elem: '#lossTable',
                    data: largestLossTrades,
                    cols: tradeCols.map(cols => cols.map(col => {
                        if (col.field === 'profit') {
                            return { ...col, title: '亏损' };
                        }
                        return col;
                    })),
                    limit: 5
                });

            } catch (e) {
                container.innerHTML = `
                <div class="error-container">
                    <h3>表格初始化失败</h3>
                    <p>${e.message}</p>
                </div>
            `;
            }
        });
    </script>
    <script>
        // 修改初始化代码 - 展开所有折叠内容
        document.querySelectorAll('.collapse-content').forEach(content => {
            content.classList.add('active');
        });

        function toggleCollapse(element) {
            const content = element.nextElementSibling;

            content.classList.toggle('active');

            // 如果是表格内容，可能需要重新渲染
            if (content.querySelector('table')) {
                setTimeout(() => {
                    const table = layui.table;
                    table.resize('metricsTable');
                    table.resize('transactionTable');
                }, 300);
            }
        }
    </script>
</body>

</html>